{% extends 'base/base.html' %}


{% block head %}
    <link rel="stylesheet" href="{{ url_for('static',filename='public/layui/css/layui.css') }}">
    <script src="{{ url_for('static', filename='public/layui/layui.js') }}"></script>
{#    <script src="{{ url_for('static',filename='js/img_show.js') }}"></script>#}

{% endblock %}

{% block page_title %}
    产品管理
{% endblock %}

{% block main_content %}
    <div class="top-box" style="float: right">
        <button class="btn btn-warning" data-toggle="modal" data-target="#product-dialog">添加产品</button>
    </div>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>产品</th>
                <th>算力</th>
                <th>价格</th>
                <th>收益(币)</th>
                <th>运行(天)</th>
                <th>产品数量</th>
                <th>优先级</th>
                <th>大图</th>
                <th>小图</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        {% for i in product %}
            <tr data-name="{{ i.name }}" data-img="{{ i.product_img }}"
                data-priority="{{ i.priority }}" data-id="{{ i.id }}" data-price="{{ i.price }}" data-compute="{{ i.compute }}" data-income="{{ i.income }}" data-days="{{ i.days }}" data-num="{{ i.num }}" data-small="{{ i.small_img }}">
                <td>{{ i.name }}</td>
                <td>{{ i.compute }}</td>
                <td style="color: #9e1317">{{ i.price }}</td>
                <td>{{ i.income }}</td>
                <td>{{ i.days }}</td>
                <td>{{ i.num }}</td>
                <td>{{ i.priority }}</td>
                <td><button class="btn btn-primary img-btn">查看图片</button></td>
                <td><a href="{{ i.small_img }}" style="color: #5182bb" target="_blank">查看图片</a></td>
                <td>{{ i.create_time }}</td>
                <td>
                    <button class="btn btn-primary btn-xs edit-product-btn">编辑</button>
                    <button class="btn btn-danger btn-xs delete-product-btn">删除</button>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

    {% if pagination %}
        <div class="pagination-link" style="text-align: center">{{ pagination.links }}</div>
    {% endif %}


    <!-- Modal -->
    <div class="modal fade" id="product-dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">产品</h4>
                </div>
                <div class="modal-body">
                    <form action="" class="form-horizontal" id="upload_form">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">名称：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="name" placeholder="产品名称">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">算力：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="compute" placeholder="算力">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">价格：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="price" placeholder="价格">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">收益：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="income" placeholder="收益">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">运行天数：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="days" placeholder="运行天数">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">产品数量：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="num" placeholder="产品数量">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">优先级：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="priority" placeholder="优先级">
                            </div>
                        </div>


                        <div class="form-group">
                            <label class="col-sm-2 control-label">首页大图：</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" name="product_img" placeholder="产品图片" id="upload_img">
                            </div>
                            <button type="button" class="layui-btn" id="upload_btn">上传图片</button>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">详情小图：</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" name="small_img" placeholder="详情小图" id="upload_img">
                            </div>
                            <button type="button" class="layui-btn" id="upload_small">上传图片</button>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="save-product-btn">保存</button>
                </div>
            </div>
        </div>
    </div>


<script>


layui.use('upload', function(){
    var upload = layui.upload;
    var dialog = $('#product-dialog');

    var linkInput = $("input[name='product_img']");
    //执行实例
    var uploadInst = upload.render({
        elem: '#upload_btn' //绑定元素
        ,url: '/cms/cms_upload/' //上传接口
        ,done: function(res){
             if(res.code == 200){
                 dialog.modal('show');
                 linkInput.val(res.data.url);
          }else {
                 layer.msg(res.message)
             }
        }
        ,error: function(){
          layer.msg('上传失败')
        }
    });
});


layui.use('upload', function(){
    var upload = layui.upload;
    var dialog = $('#product-dialog');

    var imgInput = $("input[name='small_img']");
    //执行实例
    var uploadInst = upload.render({
        elem: '#upload_small' //绑定元素
        ,url: '/cms/cms_upload/' //上传接口
        ,done: function(res){
             if(res.code == 200){
                 dialog.modal('show');
                 imgInput.val(res.data.url);
          }else {
                 layer.msg(res.message)
             }
        }
        ,error: function(){
          layer.msg('上传失败')
        }
    });
});

</script>

{% endblock %}
{% block script %}
    <script src="{{ url_for('static', filename='js/product.js') }}"></script>

{% endblock %}